<template>
  <div style="display: block; text-align: left; padding-left: 10px" ref="rootDiv">
    <div v-for="(item, index) in dataList" :key="item.id" class="item" >
      <div class="rowheader" :style="'width:'+rowheaderWidth+'px'">
        <div v-if="!item.isloading">
            <div
              class="circle"
              :class="[index == 0 ? 'green' : 'blue']"
              :style="item.color ? 'border: 2px solid ' + item.color : ''"
            ></div>
            <div v-if="index != dataList.length - 1" class="line"></div>            
        </div>
        <div v-else>
          <svg class="circle loading-icon" style="height: var( --header-circle-width );background: none;" 
            t="1761544986712"
            viewBox="0 0 1024 1024"
          >
            <path
              d="M834.7648 736.3584a5.632 5.632 0 1 0 11.264 0 5.632 5.632 0 0 0-11.264 0z m-124.16 128.1024a11.1616 11.1616 0 1 0 22.3744 0 11.1616 11.1616 0 0 0-22.3744 0z m-167.3216 65.8944a16.7936 16.7936 0 1 0 33.6384 0 16.7936 16.7936 0 0 0-33.6384 0zM363.1616 921.6a22.3744 22.3744 0 1 0 44.7488 0 22.3744 22.3744 0 0 0-44.7488 0z m-159.744-82.0224a28.0064 28.0064 0 1 0 55.9616 0 28.0064 28.0064 0 0 0-56.0128 0zM92.672 700.16a33.6384 33.6384 0 1 0 67.2256 0 33.6384 33.6384 0 0 0-67.2256 0zM51.2 528.9984a39.168 39.168 0 1 0 78.336 0 39.168 39.168 0 0 0-78.336 0z m34.1504-170.0864a44.8 44.8 0 1 0 89.6 0 44.8 44.8 0 0 0-89.6 0zM187.904 221.7984a50.432 50.432 0 1 0 100.864 0 50.432 50.432 0 0 0-100.864 0zM338.432 143.36a55.9616 55.9616 0 1 0 111.9232 0 55.9616 55.9616 0 0 0-111.9744 0z m169.0112-4.9152a61.5936 61.5936 0 1 0 123.2384 0 61.5936 61.5936 0 0 0-123.2384 0z m154.7776 69.632a67.1744 67.1744 0 1 0 134.3488 0 67.1744 67.1744 0 0 0-134.3488 0z m110.0288 130.816a72.8064 72.8064 0 1 0 145.5616 0 72.8064 72.8064 0 0 0-145.5616 0z m43.7248 169.472a78.3872 78.3872 0 1 0 156.8256 0 78.3872 78.3872 0 0 0-156.8256 0z"
              fill="#1890ff"
              p-id="5264"
            ></path>
          </svg>
        </div>

      </div>
      <div class="row">{{ item.text }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    rowheaderWidth:{
      type: Number,
      default:100,
    }
  },
  watch:{
    rowheaderWidth:{
      handler(val){
        if(this.$refs.rootDiv){
          this.$refs.rootDiv.style.setProperty('--header-width', val + 'px');
          this.$refs.rootDiv.style.setProperty('--header-circle-width', val/3 + 'px');                 
        }
      }
    }
  },
  mounted(){
    this.$refs.rootDiv.style.setProperty('--header-width', this.rowheaderWidth + 'px');
    this.$refs.rootDiv.style.setProperty('--header-circle-width', this.rowheaderWidth/3 + 'px');        
  }
};
</script>

<style scoped>
.item {
  border:none;
  height: 200px;
  width: 100%;
}
.rowheader {
  position: relative;
  display: inline-block;
  width: var(--header-width);
  height: 100%;
}
.circle {
  position: absolute;
  border-radius: 100%;
  box-sizing: border-box;
  top: 33%;
  left: 33%;
  z-index: 2;
  width: 33%;
  height: 0;
  padding-bottom: calc( 33% - 4px);
}
.blue {
  border: 2px solid #1890ff;
}
.green {
  border: 2px solid #67c23a;
}
.line {
  position: absolute;
  box-sizing: border-box;
  width: 4%;
  height: calc(100% - var(--header-circle-width));
  margin-top: 33%;
  left: 48%;
  top: 33%;
  z-index: 1;
  display: inline-block;
  background: #f0f0f0;
}
.row {
  display: inline-block;
  padding-left: 5px;
  line-height: 30px;
  vertical-align: top;
  margin-bottom: 10px;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading-icon {
  animation: rotate 1s linear infinite;
  padding: 0;
  top:33%;
}
</style>
